<template>
    <view class="cu-modal" :class="[show?'show':'', is_bottom?'bottom-modal':'']" @tap="()=>{not_cancel ? '' : _cancel()}"
        @touchmove.stop.prevent="()=>{}">
        <view class="cu-dialog bg-white" :style="(is_bottom&&height!='100vh'?'border-radius: 32rpx 32rpx 0 0;':'')"
            @tap.stop="()=>{}" @touchmove.stop.prevent="()=>{}">
            <view v-if="is_bottom && (is_hide_top_cancel != true || is_hide_top_confirm != true)" class="cu-bar bg-white">
                <view v-if="is_hide_top_cancel != true" class="action flex-sub text-nddyny" @tap="_cancel">取消</view>
                <view v-if="is_hide_top_confirm != true" class="action flex-sub text-nddyny" @tap="_confirm">{{confirm_title?confirm_title:'确定'}}</view>
            </view>
            <view v-if="!is_bottom" class="cu-bar justify-end">
                <view class="content">{{title || '提示'}}</view>
                <view v-if="is_hide_cancel != true" class="action" @tap="_cancel">
                    <text class="cuIcon-close text-nddyny"></text>
                </view>
            </view>
            <view v-else-if="is_show_top_close" style="position: relative;">
                <view class="cu-bar justify-end" style="position: absolute; right: 0; z-index: 1;" :style="'padding-top:'+$store.state.app.status_bar">
                    <view v-if="is_hide_cancel != true" class="action" @tap="_cancel">
                        <view class="round text-white flex align-center justify-center text-20" style="width: 56rpx; height: 56rpx; background-color: rgba(0,0,0,.2)">
                            <text class="cuIcon-close"></text>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="content" class="padding-30">
                <view v-if="isArray(content)">
                    <view v-for="(string, key) in content" :key="key" class="line-height-15em">
                        {{string}}
                    </view>
                </view>
                <view v-else>
                    {{content}}
                </view>
            </view>
            <view v-else :class="class_content" class="padding-lr-30 text-left" @touchmove.stop.prevent="()=>{}">
                <scroll-view v-if="is_scroll_content" :scroll-y="true" :style="(height?('height:'+height):'max-height: '+_content_height+';')"
                    @touchmove.stop.prevent="()=>{}" :show-scrollbar="true">
                    <slot name="content"></slot>
                </scroll-view>
                <slot v-else name="content"></slot>
            </view>
            <slot name="contentBottom"></slot>
            <view v-if="!is_bottom && (is_hide_cancel != true || is_hide_confirm != true)" class="cu-bar bg-white">
                <view v-if="is_hide_cancel != true" class="action flex-sub text-nddyny" @tap="_cancel">取消</view>
                <view v-if="is_hide_confirm != true" class="action flex-sub text-nddyny" @tap="_confirm">{{confirm_title?confirm_title:'确定'}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: [
            'show', 'confirm', 'confirm_title', 'cancel', 'title', 'content', 'is_hide_cancel', 'is_hide_confirm',
            'is_bottom', 'is_scroll_content', 'is_hide_top_cancel', 'is_hide_top_confirm', 'is_show_top_close',
            'content_height', 'content_bottom_height', 'height', 'class_content', 'not_cancel'
        ],
        data() {
            return {
                _content_height: 0
            }
        },
        created() {
            this.setContentHeight();
        },
        methods: {
            setContentHeight() {
                if (this.height) {
                    return;
                }
                if (this.content_height) {
                    this._content_height = this.content_height;
                    return;
                }
                let sub_height_string = this.content_bottom_height ? (' - ' + this.content_bottom_height) : '';
                if (!this.is_bottom) {
                    sub_height_string += ' - 100rpx - ' + this.custom_bar * 2 + 'px';
                    sub_height_string += ' - 100rpx';
                    if (this.is_hide_cancel != true || this.is_hide_confirm != true) {
                        sub_height_string += ' - 100rpx';
                    }
                } else {
                    sub_height_string += ' - 100rpx - ' + this.custom_bar + 'px';
                }
                this._content_height = 'calc(100vh ' + sub_height_string + ' )';
            },
            _confirm() {
                if (this.confirm) {
                    this.confirm();
                } else {
                    this.hideDialog();
                }
            },
            _cancel() {
                if (this.cancel) {
                    this.cancel();
                } else {
                    this.hideDialog();
                }
            },
            hideDialog() {
                this.$emit('update:show', false);
            },
            isArray(array) {
                return this.$nddyny.types.isArray(array);
            }
        }
    }
</script>
